/* vue */
import { defineComponent } from "vue"
/* util */
import DOMPurify from 'dompurify'
import { marked } from 'marked'
import { isFalsy } from "@src/util/type"
/* scss */
import '@src/component/business/BizChatBar/content.scss'

export default defineComponent({
  name: "BizChatBarContent",
  props: {
    isAnswering: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
  computed: {
    contentHTML(): string {
      try {
        const markdownValue = marked.parse(this.value)
        return DOMPurify.sanitize(markdownValue)
      } catch (error) {
        return this.value || ''
      }
    },
  },
  methods: {
    renderContent() {
      return (
        <div class="biz-chat-bar-content__container">
          <div 
            class="biz-chat-bar-content__content" 
            // @ts-ignore
            domPropsInnerHTML={this.contentHTML}
          >
          </div>
        </div>
      )
    }
  },
  render() {
    
    if (isFalsy(this.value)) {
      return <div></div>
    }
    
    return (
      <div class="biz-chat-bar-content">
        { this.renderContent() }
      </div>
    )
    
  }
})